<!--
    @name 维修工单查询详情弹窗
    @author wangml
    @date 2021-02-24
-->
<template>
  <section class="fixHeight">
    <el-dialog
      v-dialogDrag
      :close-on-click-modal="true"
      title="历史查询"
      :append-to-body="true"
      :visible="popupsVisible"
      width="75%"
      @close="closePopups"
    >
      <dialogHeader
        slot="title"
        title="维修历史查询"
        :style-type="$store.state.app.dialogType"
      />
      <!-- 顶部按钮 -->
      <div class="btns-container">
        <el-button v-for="item in formButtons" :key="item.comKey">
          {{ item.text }}
        </el-button>
      </div>
      <!-- 车辆信息 -->
      <QueryComponent
        :dynamic-inputs="formInputs_1"
        :form-field="formField1"
        title="车辆信息"
      />
      <!-- 派工信息 -->
      <div class="checkbox-wrapper">
        <el-checkbox
          v-for="item in formCheckboxs"
          :key="item.key"
          v-model="item.model"
        >{{ item.text }}</el-checkbox>
      </div>
      <QueryComponent
        :dynamic-inputs="formInputs_2"
        :form-field="formField2"
        title="派工信息"
      />
      <!-- 车主信息 -->
      <QueryComponent
        :dynamic-inputs="formInputs_3"
        :form-field="formField3"
        title="车主信息"
      />
      <!-- 三个文本域 -->
      <div class="textarea-header">
        <div class="filter-container filter-title textarea-header__item">
          客户描述
        </div>
        <div class="filter-container filter-title textarea-header__item">
          上次建议维修项目
        </div>
        <div class="filter-container filter-title textarea-header__item">
          本次建议维修项目
        </div>
      </div>
      <OneTableTemplate
        :dynamic-components="textareaInputs"
        :dynamic-form-fields="formField4"
      />
      <!-- 服务活动 -->
      <QueryComponent
        ref="table_1"
        :dynamic-tables="tableHeader_1"
        :is-show-pagination="false"
        ::is-show-select="false"
        title="服务活动"
      />
      <!-- 保养套餐/商城精品 -->
      <QueryComponent
        ref="table_2"
        :dynamic-tables="tableHeader_2"
        :is-show-pagination="false"
        title="保养套餐/商城精品"
      />
      <!-- 维修信息 -->
      <div class="filter-container filter-title">维修信息</div>
      <!-- 维修信息 下拉框
            <div class="mainten-select">
                维修类型：<el-select></el-select>
            </div> -->
      <!-- 维修信息 表格一 -->
      <div class="mainten-table__line">
        <span class="mainten-table__line-info">维修项目</span>
      <!-- <span class="mainten-table__line-btns">
                    <el-button>新增</el-button>
                    <el-button>删除</el-button>
                </span> -->
      </div>
      <OneTableTemplate
        ref="table_3_1"
        :dynamic-table-cols="tableHeader_3_1"
        :dynamic-table-defult-height="300"
        :is-show-pagination="false"
      />
      <!-- 维修信息 表格二 -->
      <div class="mainten-table__line">
        <span class="mainten-table__line-info">维修备件</span>
      <!-- <span class="mainten-table__line-btns">
                    <el-button>新增</el-button>
                    <el-button>删除</el-button>
                </span> -->
      </div>
      <OneTableTemplate
        ref="table_3_2"
        :dynamic-table-cols="tableHeader_3_2"
        :dynamic-table-defult-height="300"
        :is-show-pagination="false"
      />
      <!-- 维修信息 表格三 -->
      <div class="mainten-table__line">
        <span class="mainten-table__line-info">其他项目</span>
      <!-- <span class="mainten-table__line-btns">
                    <el-button>新增</el-button>
                    <el-button>删除</el-button>
                </span> -->
      </div>
      <OneTableTemplate
        ref="table_3_3"
        :dynamic-table-cols="tableHeader_3_3"
        :is-show-pagination="false"
        :dynamic-table-defult-height="300"
        :dynamic-form-fields="formField"
      />
      <!-- 费用信息 -->
      <QueryComponent
        ref="table_4"
        :dynamic-inputs="formInputs_4"
        :dynamic-tables="tableHeader_4"
        :form-field="formField5"
        :is-show-pagination="false"
        :is-show-select="false"
        title="费用信息"
      />
    </el-dialog>
  </section>
</template>

<script>
import OneTableTemplate from '@/components/templates/oneTable'
import QueryComponent from '@/components/QueryComponent/QueryComponent'
import { vehiclePdiPriceInquirys } from '@/api/se/vehiclePdiPriceInquiry'
export default {
  name: 'SysorderDetails',
  components: {
    dialogHeader: () => import('@/components/dialogHeader'),
    OneTableTemplate,
    QueryComponent
  },
  props: {
    popupsVisible: { type: Boolean, default: false },
    rowData: { type: Object, default: () => ({}) }
  },
  data() {
    return {
      formField: {
        repairOrderCode: this.rowData.repairOrderCode
      },
      //   车辆信息
      formField1: {
        carLicense: '',
        vin: '',
        carBrandCn: '',
        carSeriesCn: '',
        carConfigCode: '',
        carConfigCn: '',
        carColorName: '',
        buyCaruseName: '',
        mileage: '',
        buyDate: '',
        deliveryDate: ''
      },
      formInputs_1: [
        {
          compKey: 'key0',
          labelName: '车牌号：',
          codeField: 'carLicense',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key1',
          labelName: 'VIN码：',
          codeField: 'vin',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key2',
          labelName: '品牌：',
          codeField: 'carBrandCn',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key3',
          labelName: '车系：',
          codeField: 'carSeriesCn',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key4',
          labelName: '车型编码：',
          codeField: 'carConfigCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key5',
          labelName: '车型名称：',
          codeField: 'carConfigCn',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key6',
          labelName: '颜色：',
          codeField: 'carColorName',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key7',
          labelName: '车辆用途：',
          codeField: 'buyCaruseName',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key8',
          labelName: '行驶里程：',
          codeField: 'mileage',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key9',
          labelName: '购车日期：',
          codeField: 'buyDate',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          isMul: false,
          disabled: true
        },
        {
          compKey: 'key10',
          labelName: '交车日期：',
          codeField: 'deliveryDate',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        }
      ],
      //   派工信息
      formField2: {
        repairOrderCode: '', // 派工单号
        saEmpId: '', // 服务顾问（等设计）
        repairMan: '', // 送修人
        repairTel: '', // 送修人电话
        repairTime: '', // 到店时间
        preGetDate: '', // 预计交车时间
        repairOrderStatusName: '', // 工单状态
        // isCarStore: "", //是否库存车 （1是0否）
        // ispick: "", //是否取车
        // isDelivery: "", //是否送车
        // isHelp: "", //是否救援
        // iswait: "", //是否在店等待
        // isClean: "", //是否洗车
        dlrId: '', // 专营店ID
        dlrBusiStatus: '', // 门店类型
        dlrName: '' // 委外门店
      },
      formInputs_2: [
        {
          compKey: 'key0',
          labelName: '派工单号：',
          codeField: 'repairOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key1',
          labelName: '服务顾问：',
          codeField: 'saEmpId',
          lookuptype: 'VE0185',
          component: () => import('@/components/org/LookupValue'),
          type: 'dropdownList',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key2',
          labelName: '送修人：',
          codeField: 'repairMan',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key3',
          labelName: '送修人电话：',
          codeField: 'repairTel',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key4',
          labelName: '到店时间：',
          codeField: 'repairTime',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key5',
          labelName: '预计交车时间：',
          codeField: 'preGetDate',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key6',
          labelName: '工单状态：',
          codeField: 'repairOrderStatusName',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key7',
          labelName: '委外门店：',
          codeField: 'dlrName',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        }
      ],
      formCheckboxs: [
        {
          key: 'key0',
          text: '库存车',
          model: ''
        },
        {
          key: 'key1',
          text: '取车',
          model: ''
        },
        {
          key: 'key2',
          text: '送车',
          model: ''
        },
        {
          key: 'key3',
          text: '救援',
          model: ''
        },
        {
          key: 'key4',
          text: '在店等待',
          model: ''
        },
        {
          key: 'key5',
          text: '洗车',
          model: ''
        }
      ],
      //   车主信息
      formField3: {
        sdpUserId: '',
        custName: '',
        custTel: '',
        custClassNa: '',
        credNo: '',
        addrProvince: '',
        addrCity: '',
        addrCounty: '',
        addrStreet: ''
      },
      formInputs_3: [
        {
          compKey: 'key0',
          labelName: '用户ID：',
          codeField: 'sdpUserId',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key1',
          labelName: '车主姓名：',
          codeField: 'custName',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key2',
          labelName: '车主电话：',
          codeField: 'custTel',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key3',
          labelName: '车主性质：',
          codeField: 'custClassName',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key4',
          labelName: '证件号码：',
          codeField: 'credNo',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key5',
          labelName: '省份：',
          codeField: 'addrProvince',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key6',
          labelName: '城市：',
          codeField: 'addrCity',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key7',
          labelName: '区县：',
          codeField: 'addrCounty',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key8',
          labelName: '详细地址：',
          codeField: 'addrStreet',
          isMul: false,
          component: () => import('@/components/org/commonInput/textareaInput'),
          // type: "textarea",
          type: 'inputText',
          isMust: true,
          span: 18,
          disabled: true
        }
      ],
      //   三个文本域
      formField4: {
        csDesc: '',
        scRecommendItem: '', // 上次建议维修项目
        recommendItem: ''
      },
      textareaInputs: [
        {
          compKey: 'key0',
          // labelName: "详细地址：",
          codeField: 'csDesc',
          isMul: false,
          component: () => import('@/components/org/commonInput/textareaInput'),
          // type: "textarea",
          type: 'inputText',
          isMust: true,
          span: 8,
          disabled: true
        },
        {
          compKey: 'key1',
          codeField: 'scRecommendItem', // 上次建议维修项目
          isMul: false,
          component: () => import('@/components/org/commonInput/textareaInput'),
          // type: "textarea",
          type: 'inputText',
          isMust: true,
          span: 8,
          disabled: true
        },
        {
          compKey: 'key2',
          codeField: 'recommendItem',
          isMul: false,
          component: () => import('@/components/org/commonInput/textareaInput'),
          type: 'inputText',
          isMust: true,
          span: 8,
          disabled: true
        }
      ],
      // 服务活动
      tableHeader_1: [
        {
          label: '活动编号',
          prop: 'actionCode'
        },
        {
          label: '活动名称',
          prop: 'actionName'
        },
        {
          label: '活动类型',
          prop: 'actionTypeName'
        },
        {
          label: '开始日期',
          prop: 'beginDate'
        },
        {
          label: '结束日期',
          prop: 'endDate'
        }
      ],
      // 保养套餐/商城精品
      tableHeader_2: [
        {
          label: '订单号',
          prop: 'repairOrderId'
        },
        {
          label: '类别',
          prop: 'comboSaleType'
        },
        {
          label: '保养套餐/精品编码',
          prop: 'comboSaleCode'
        },
        {
          label: '保养套餐/精品名称',
          prop: 'comboSaleName'
        },
        {
          label: '使用次数/数量',
          prop: 'comboSaleCount'
        },
        {
          label: '有效日期',
          prop: 'endDate'
        },
        {
          label: '购车日期',
          prop: 'buyDate'
        }
      ],
      // 维修项目
      tableHeader_3_1: [
        {
          label: '工时编码',
          prop: 'wiCode'
        },
        {
          label: '维修内容',
          prop: 'wiName'
        },
        {
          label: '付费性质',
          prop: 'payKindName'
        },
        {
          label: '工时数',
          prop: 'saleWorkQty'
        },
        {
          label: '工时单价',
          prop: 'wiPrice'
        },
        {
          label: '费用合计',
          prop: 'wiAmount'
        },
        {
          label: '维修类型',
          prop: 'repairTypeName'
        },
        {
          label: '费用预估',
          prop: 'wiPreAmount'
        },
        {
          label: '套餐/精品编码',
          prop: 'comboSaleCode'
        },
        {
          label: '是否委外',
          prop: 'isEntrust'
        },
        {
          label: '备注',
          prop: 'note'
        }
      ],
      // 维修备件
      tableHeader_3_2: [
        {
          label: '备件编码',
          prop: 'partNo'
        },
        {
          label: '备件名称',
          prop: 'partName'
        },
        {
          label: '付费性质',
          prop: 'payKindName'
        },
        {
          label: '数量',
          prop: 'partQty'
        },
        {
          label: '单价',
          prop: 'partPrice'
        },
        {
          label: '费用合计',
          prop: 'partAmount'
        },
        {
          label: '维修类型',
          prop: 'repairTypeName'
        },
        {
          label: '维修类别',
          prop: 'retRepairTypeName'
        },
        {
          label: '费用预估',
          prop: 'prePartAmount'
        },
        {
          label: '套餐/精品编码',
          prop: 'comboSaleCode'
        },
        {
          label: '是否委外',
          prop: 'isAssign'
        },
        {
          label: '备注',
          prop: 'note'
        }
      ],
      // 其他项目
      tableHeader_3_3: [
        {
          label: '其他项目',
          prop: 'otherAmountType'
        },
        {
          label: '付费性质',
          prop: 'payKindName'
        },
        {
          label: '费用',
          prop: 'otherAmount'
        },
        {
          label: '套餐/精品编码',
          prop: 'servicePackageCode'
        },
        {
          label: '备注',
          prop: 'remark'
        }
      ],
      // 费用信息
      formField5: {
        spTotal: '',
        nbTotal: '',
        bxTotal: '',
        khTotal: '',
        wCoSts: '',
        pCoSts: '',
        oCoSts: '',
        totals: ''
      },
      formInputs_4: [
        {
          compKey: 'key0',
          labelName: '索赔：',
          codeField: 'spTotal',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key1',
          labelName: '内部：',
          codeField: 'nbTotal',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key2',
          labelName: '保险：',
          codeField: 'bxTotal',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key3',
          labelName: '客户：',
          codeField: 'khTotal',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key4',
          labelName: '工时费：',
          codeField: 'wCoSts',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key5',
          labelName: '备件费：',
          codeField: 'pCoSts',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key6',
          labelName: '其他费用：',
          codeField: 'oCoSts',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key7',
          labelName: '费用合计：',
          codeField: 'totals',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        }
      ]
    }
  },
  watch: {
    'popupsVisible': function(isOpen) {
      if (isOpen) {
        // 打开弹窗 请求数据
        this.queryMore()
        this.queryLastTimeProposal()
        this.querysActivitiesList()
        this.querySetMealList()
        this.queryMaintenanceTimeList()
        this.queryRepairPartList()
        this.queryRepairOtherList()
        this.queryOutlayInfo()
      } else {
      }
    }
  },
  mounted() {
  },
  methods: {
    // 关闭窗口
    closePopups() {
      this.$emit('update:popups-visible', false)
    },
    // 主表
    queryMore() {
      const queryObj = {
        type: 'mutation',
        apiConfig: vehiclePdiPriceInquirys.workOrderDetails,
        variables: {
          repairOrderCode: this.rowData.repairOrderCode
        }
      }
      var paramD = this.$getParams(queryObj)
      this.$requestAPI(paramD).then(response => {
        for (const i in this.formField1) {
          this.formField1[i] = response.rows[1][i]
        }
        for (const i in this.formField2) {
          this.formField2[i] = response.rows[1][i]
        }
        for (const i in this.formField3) {
          this.formField3[i] = response.rows[1][i]
        }
        for (const i in this.formField4) {
          this.formField4[i] = response.rows[1][i]
        }
      })
    },
    //  上次建议维修项目
    queryLastTimeProposal() {
      const queryObj = {
        type: 'mutation',
        apiConfig: vehiclePdiPriceInquirys.lastTimeProposal,
        variables: {
          vin: this.rowData.vin
        }
      }
      var paramD = this.$getParams(queryObj)
      this.$requestAPI(paramD).then(response => {
        this.formField4.scRecommendItem = response.rows[0].scRecommendItem
      })
    },
    // 服务活动
    querysActivitiesList() {
      const queryObj = {
        type: 'mutation',
        apiConfig: vehiclePdiPriceInquirys.sActivitiesList,
        variables: {
          dlrId: this.rowData.dlrId
        }
      }
      var paramD = this.$getParams(queryObj)
      this.$requestAPI(paramD).then(response => {
        this.$refs.table_1.$children[0].list = response.rows
      })
    },
    // 保养套餐/商城精品
    querySetMealList() {
      const queryObj = {
        type: 'mutation',
        apiConfig: vehiclePdiPriceInquirys.setMealList,
        variables: {
          repairOrderId: this.rowData.repairOrderId
        }
      }
      var paramD = this.$getParams(queryObj)
      this.$requestAPI(paramD).then(response => {
        this.$refs.table_2.$children[0].list = response.rows
      })
    },
    // 维修项目
    queryMaintenanceTimeList() {
      const queryObj = {
        type: 'mutation',
        apiConfig: vehiclePdiPriceInquirys.maintenanceTimeList,
        variables: {
          repairOrderId: this.rowData.repairOrderId
        }
      }
      var paramD = this.$getParams(queryObj)
      this.$requestAPI(paramD).then(response => {
        this.$refs.table_3_1.list = response.rows
      })
    },
    // 维修备件
    queryRepairPartList() {
      const queryObj = {
        type: 'mutation',
        apiConfig: vehiclePdiPriceInquirys.repairPartList,
        variables: {
          repairOrderId: this.rowData.repairOrderId
        }
      }
      var paramD = this.$getParams(queryObj)
      this.$requestAPI(paramD).then(response => {
        this.$refs.table_3_2.list = response.rows
      })
    },
    // 其他项目
    queryRepairOtherList() {
      const queryObj = {
        type: 'mutation',
        apiConfig: vehiclePdiPriceInquirys.repairOtherList,
        variables: {
          repairOrderId: this.rowData.repairOrderId
        }
      }
      var paramD = this.$getParams(queryObj)
      this.$requestAPI(paramD).then(response => {
        this.$refs.table_3_3.list = response.rows
      })
    },
    // 费用信息
    queryOutlayInfo() {
      const queryObj = {
        type: 'mutation',
        apiConfig: vehiclePdiPriceInquirys.outlayInfo,
        variables: {}
      }
      var paramD = this.$getParams(queryObj)
      this.$requestAPI(paramD).then(response => {
        for (const i in this.formField5) {
          this.formField5[i] = response.rows[0][i]
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.checkbox-wrapper {
  width: 100%;
  padding: 0 10px;
  background-color: #fff;
  .el-checkbox {
    float: right;
    margin-top: 10px;
  }
}
.textarea-header {
  width: 100%;
  height: 30px;
  background-color: #fff;
  &__item {
    width: calc(100% / 3);
    float: left;
  }
}
.mainten-select {
  width: 100%;
  height: 30px;
  padding: 0 20px;
  background-color: #fff;
}
.mainten-table__line {
  width: 100%;
  height: 30px;
  padding: 0 20px;
  line-height: 30px;
  background-color: #fff;
  &-info {
    float: left;
  }
  &-btns {
    float: right;
  }
}
  /deep/.el-dialog__body {
    max-height: 650px;
    height: 650px;
    overflow-y: auto;
    overflow-x: hidden;
  }
</style>
